<template>
	<div style="width: 100%;height: 650px;margin-top: 50px;position: relative;right: 50px;">
		<p style="font-weight: 100;font-size: 45px;text-align: center;">众筹用户登录</p>		
		<div>
			<el-form :model="form" :rules="rules" ref="fromref" class="form-box">
				<h3 style="color: #606266;">登录页面</h3>
				<el-form-item prop="name">
					<el-input v-model="form.name" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type='password' v-model="form.password" prefix-icon="el-icon-lock"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="width: 120px;" @click="submitForm('from')">登录</el-button><el-link type="primary" style="margin-right: 40px;margin-left: 30px;" @click="zhuce()">去注册</el-link>		<br>	 
					 <el-link type="primary" style="margin-right: 40px;" @click="welcome()">返回主页面</el-link>
					 <el-link type="primary" style="margin-right: 40px;" @click="loginH()">管理员登录</el-link>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		methods:{
			//首页			
			 welcome() {
			 	this.$router.push('/welcome')
			 },
			 // 管理员登录
			 loginH(){
			 	 this.$router.push('/loginH')
			 },
			 // 注册
			 zhuce() {
			 	this.$router.push('/zhuce')
			 },
			async loginQueryUserByUserName(){
				var param = new URLSearchParams();
				param.append("name",this.form.name)
				var res =await this.$http.post("queryUserByUserName",param);
				console.log(res.data.code)
				if(res.data.code==200){
					console.log('该账号未注册，请前往注册！')
					this.$message.error('该账号未注册，请前往注册！！')
				} else {
					this.nameIsLogin = false
				}
			},
			async submitForm(formName){
				if(this.form.name!=''&&this.form.password!=''&&this.nameIsLogin == false&&this.passwordIsLogin==false){
					//使用axios来请求后端的vueLogin请求
					var param = new URLSearchParams();
					param.append("name",this.form.name);
					param.append("password",this.form.password);
					var res =await this.$http.post("/vueLogin",param);
					console.log(res.data)
					if(res.data.code==200){
						this.$message.success(res.data.message)
						window.sessionStorage.setItem('userId',res.data.data.userId)
						window.sessionStorage.setItem('userq',this.form.name)
						
						window.sessionStorage.setItem('token',res.data.data.token)
						this.$router.push('/welcome')
						
					} else {
						this.$message.error(res.data.message)
					}
				}else{
					this.$message.error('数据格式错误,请输入完整！！！')
					return false;
				}
			
			}
		},
		data() {
			var vname = (rule, value, callback) => {
			  if (value === '') {
			    this.$message({
			              showClose: true,
			              message: '错了哦，帐号不能为空！',
			              type: 'error'
			            });
			  } else {
				this.nameIsLogin = false
				this.loginQueryUserByUserName()
			    callback();
			  }
			};
			var vpassword = (rule, value, callback) => {
			  if (value === '') {
			    this.$message({
			              showClose: true,
			              message: '错了哦，密码不能为空！',
			              type: 'error'
			            });
			  }  else {
				  this.passwordIsLogin=false
			    callback();
			  }
			  };
			return {
				nameIsLogin : true,
				passwordIsLogin: true,
				form: {
					name: '',
					password: ''
				},
				rules: {
					name: [
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						},
						{ validator: vname, trigger: 'blur' }
					],
					password: [
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						},
						{ validator: vpassword, trigger: 'blur' },
					]
				}
			}
		}
	}
</script>

<style>
	.form-box {
		width: 50%;
		/* border: 1px solid blue; */
		padding: 20px 50px;
		margin: 0px auto;
		box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 10px;
		text-align: center;
	}
</style>
